<template>
  <div class="container">
    <div v-show="!showDetails && !show_addLessonSchedule">
      <br />
      <table>
        <tr>
          <th>
            <span>学期：</span>
            <el-button @click="openSemesterList = true" type="text" style="width: 250px; text-align: left;">
              <span v-if="semesterSelect">{{semesterSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th>
            <span>课程：</span>
            <el-button @click="openCourseList = true" type="text" style="width: 250px; text-align: left;">
              <span v-if="courseSelect">{{courseSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th></th>
        </tr>
        <tr>
          <th>
            <span>班级：</span>
            <el-button @click="openInstructionClassList = true" type="text" style="width: 250px; text-align: left;">
              <span v-if="instructionClassSelect">{{instructionClassSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th>
            <span>教师：</span>
            <el-button @click="openTeacherList = true" type="text" style="width: 250px; text-align: left;">
              <span v-if="teacherSelect">{{teacherSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th>
            <el-button type="primary" icon="el-icon-search" @click="">搜索</el-button>
          </th>
        </tr>
      </table>
      <div class="table">
        <el-table
          :data="lessonSchedule_list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          stripe
          border
          @row-click="rowClick"
          width="100%"
        >
          <el-table-column prop="term_name" label="学期"></el-table-column>
          <el-table-column prop="course_name" label="课程名称"></el-table-column>

          <!-- element ui 使用过滤器 -->
          <el-table-column prop="institute_name" label="校区">
            <template slot-scope="scope">{{ scope.row.institute_name | ellipsis }}</template>
          </el-table-column>
          <el-table-column prop="class_name" label="授课班级"></el-table-column>
          <el-table-column prop="arrangeNumber" label="日期"></el-table-column>
          <el-table-column prop="attendanceNumber" label="作息"></el-table-column>
          <el-table-column prop="teacher_name" label="授课教师"></el-table-column>
        </el-table>
        <br />
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          style="margin-left: 30%;"
        ></el-pagination>
      </div>
    </div>
    <!-- 某一课程详情组件 -->
    <div class="details" v-show="showDetails">
      <course_details :courseDetails="courseDetails" @showDetails="showDetails1" />
    </div>
    <!-- 添加课程组件 -->
    <div class="add_lessonSchedule" v-show="show_addLessonSchedule">
      <add @showAdd="showAdd1" />
    </div>
  </div>
</template>

<script>
import course_details from "@/views/education-instructionalMatters/curriculum/details";
import add from "@/views/education-instructionalMatters/curriculum/add";
export default {
  name: "CurriculumResult",
  data() {
    return {
      tableTotal: 4,
      currentPage: 1,
      pagesize: 10,
      show_addLessonSchedule: false, //显示添加课程
      showDetails: false, //显示课程详情
      courseDetails: {}, //某一行课程的详情
      lessonSchedule_list: [], //全校的课程表
      institute_list: [], //学院列表
      major_list: [], //专业列表

      search_instituteName: "", //学院名称---输入的搜索条件
      search_majorName: "", //专业名称---输入的搜索条件
      search_className: "", //班级---输入的搜索条件
      search_personId: "", //用户工号---输入的搜索条件
      search_personName: "", //用户名称---输入的搜索条件
      search_time: "" //时间---输入的搜索条件
    };
  },
  components: {
    course_details,
    add
  },
  filters: {
    //字数显示过滤器，字数超过6个用“...”表示
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 6) {
        return value.slice(0, 6) + "...";
      }
      return value;
    }
  },
  created() {
    //加载页面时,获取全校的课程表
    this.getLessonSchedule_list();
    //加载页面时，获取学院列表
    this.getIinstitute_list();
  },
  methods: {
    //获取全校的课程表
    getLessonSchedule_list() {
      this.lessonSchedule_list = [
        {
          term_name: "2019-2020-1", //学期
          course_id: "0001", //课程编号
          course_name: "C语言", //课程名称
          institute_name: "计算机科学与软件学院、大数据学院", //开课学院
          class_name: "软件一班", //教学班名称
          arrangeNumber: 90, //排课人数
          attendanceNumber: 80, //上课人数
          teacher_name: "张三", //授课教师
          place: "二教102", //上课地点
          week: "星期一", //星期几上课
          sectionTime: "1、2节", //第几节
          classPeriod: 28, //课时
          description: "编程入门课程" //授课内容简介
        },
        {
          term_name: "2019-2020-1", //学期
          course_id: "0002", //课程编号
          course_name: "数据库", //课程名称
          institute_name: "计算机科学与软件学院、大数据学院", //开课学院
          class_name: "软件一班", //教学班名称
          arrangeNumber: 95, //排课人数
          attendanceNumber: 80, //上课人数
          teacher_name: "李四", //授课教师
          place: "二教103", //上课地点
          week: "星期一", //星期几上课
          sectionTime: "3、4节", //第几节
          classPeriod: 28, //课时
          description: "数据库基础" //授课内容简介
        },
        {
          term_name: "2019-2020-1", //学期
          course_id: "0003", //课程编号
          course_name: "C语言", //课程名称
          institute_name: "计算机科学与软件学院、大数据学院", //开课学院
          class_name: "软件二班", //教学班名称
          arrangeNumber: 90, //排课人数
          attendanceNumber: 80, //上课人数
          teacher_name: "张三", //授课教师
          place: "二教102", //上课地点
          week: "星期二", //星期几上课
          sectionTime: "1、2节", //第几节
          classPeriod: 28, //课时
          description: "编程入门课程" //授课内容简介
        },
        {
          term_name: "2019-2020-1", //学期
          course_id: "0004", //课程编号
          course_name: "数据库", //课程名称
          institute_name: "计算机科学与软件学院、大数据学院", //开课学院
          class_name: "软件二班", //教学班名称
          arrangeNumber: 95, //排课人数
          attendanceNumber: 80, //上课人数
          teacher_name: "李四", //授课教师
          place: "二教103", //上课地点
          week: "星期二", //星期几上课
          sectionTime: "3、4节", //第几节
          classPeriod: 28, //课时
          description: "数据库基础" //授课内容简介
        }
      ];
    },
    //根据对应学校ID获取学院列表
    getIinstitute_list() {
      this.institute_list = [
        {
          institute_id: "1",
          institute_name: "计算机科学与软件学院，大数据学院"
        },
        { institute_id: "2", institute_name: "文学院" },
        { institute_id: "3", institute_name: "外语学院" },
        { institute_id: "4", institute_name: "食品与安全学院" }
      ];
    },
    //批量Excel导出课程表
    batch_outport() {},

    //添加单个课程表，打开添加页面
    add_lessonSchedule() {
      this.show_addLessonSchedule = true;
    },
    //由添加页面返回
    showAdd1(val) {
      this.show_addLessonSchedule = val;
    },

    //条件搜索
    search_lessonSchedule() {
      const searchData = {
        instituteName: this.search_instituteName, //学院名称
        majorName: this.search_majorName, //专业名称
        className: this.search_className, //班级
        personId: this.search_personId, //用户工号
        personName: this.search_personName, //用户名称
        time: this.search_time //时间
      };
    },

    //点击课程列表中的某一列,显示课程详情
    rowClick(val) {
      this.courseDetails = val;
      this.showDetails = true;
    },
    //子组件课程详情组件传回来"false",
    showDetails1(val) {
      this.showDetails = val;
    },
    // 换页
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    }
  }
};
</script>

<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
span {
  font-weight: 500;
}
tr {
  height: 40px;
}
</style>
